<template>
  <div>
    <div class="flex justify-end items-center mt-2">
      <a-button type="primary" class="mr-2" @click="onClickAdd(store.currentPatient)">手术预约</a-button>
    </div>
    <template v-if="operationList.length">
      <div v-for="item in operationList" :key="item" class="mt-5 mb-2 border border-solid rounded hover:bg-secondary">
        <div class="h-12 border-b border-solid flex items-center bg-thin">
          <div class="projectName truncate w-[180px] pl-5 font-bold text-left">
            <!-- <a-tooltip placement="topLeft" title="未登记"> {{ item.statusStr }} </a-tooltip> -->
            <div :class="{ 'text-red-500': item.status === '3', 'text-lime-500': item.status === '1' }">{{ item.statusStr }}</div>
            <!-- <div v-if="item.status === '0'">未安排</div>
            <div v-if="item.status === '1'">已安排</div>
            <div v-if="item.status === '3'">待手术</div>
            <div v-if="item.status === '4'">手术中</div>
            <div v-if="item.status === '5'">已手术</div> -->
          </div>
          <div class="w-[160px]">预约医生：{{ item.aptmEmpId || '-' }}</div>
          <div>预约时间：{{ item.aptmTime }}</div>
          <div class="text-right flex-1 mr-6">
            <a-button type="link" size="small" :disabled="item.status === '3'" @click="onClickAdd(item)">修改</a-button>
            <a-divider type="vertical" />
            <BaseButton confirm-text="确认作废?" type="text" danger size="small" :disabled="item.status === '3' || item.status === '1'" @click="onCancel(item)">
              作废
            </BaseButton>
            <a-divider type="vertical" />
            <a-button type="link" size="small" :disabled="item.status !== '0' && item.status !== '1'" @click="onPrint(item)">手术通知单</a-button>
          </div>
        </div>
        <div class="leading-10 flex items-center justify-between my-2 pl-5">
          <div class="flex-1">
            <div class="flex items-center">
              <LabelValue :width="325" label="手术日期" :value="item.aptmOprDate" />
              <LabelValue :width="325" label="手术时间" :value="item.aptmOprTime" />
              <LabelValue :width="325" label="手术医生" :value="item.ssysName" />
            </div>
            <div class="flex items-center">
              <LabelValue :width="325" label="右眼手术" :value="item.odmc" />
              <LabelValue :width="400" label="左眼手术" :value="item.osmc" />
            </div>
            <div class="flex items-center">
              <LabelValue :width="600" label="备注" :value="item.memo" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <a-empty />
    </template>
  </div>
  <Edit v-model:open="open" :row-data="rowData" @success="onSuccess" />
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import BaseButton from '@/components/BaseButton'
import { post } from '@/utils/request'
import LabelValue from '@/components/LabelValue'
import Edit from '@/views/operation-eyes/operation-registration/Edit.vue'
import useStore from '../../store'

const store = useStore()
const open = ref(false)
const operationList = ref([])
const rowData = ref({})

const onClickAdd = (row = {}) => {
  rowData.value = { ...row }
  open.value = true
}

const queryList = async () => {
  const { code, data, msg } = await post('/operation/opex/getAppointmentRecordList', { zjm: store.currentPatient.brId, jzbh: store.currentPatient.jzbh })
  if (code !== 0) return message.error(msg)
  operationList.value = data
}

const onCancel = async (record) => {
  const res = await post('/operation/opex/doUpdateAppointmentStatus', record)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  queryList()
}

// 手术通知单
const onPrint = async (row) => {
  const { code, msg, data } = await post('/outp/outPrint/printSurgicalNotice', { aptmLsh: row.aptmLsh, jzbh: store.currentPatient.jzbh })
  if (code !== 0) return message.error(msg)
  window.openExe?.rpt(data) //调用winform打印
}

const onSuccess = () => {
  open.value = false
  queryList()
}

onMounted(() => {
  queryList()
})
</script>
<style lang="less" scoped>
.projectName {
  font-size: 20px;
}
</style>
